<template>
  <div class="form_attr">
    <div v-if="type === 'button' || type === 'button_2'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.button_text" placeholder="请输入按钮文字">
                <template slot="prepend">按钮文字</template>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>布局</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="7" class="lineHeight36">按钮宽度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_width" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="7" class="lineHeight36">按钮高度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_height" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20" v-if="seatType === 'top' || seatType === 'bottom'">
            <el-col :span="7" class="lineHeight36">纵轴</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.position" class="widthAuto" :min="0" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>按钮样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮背景颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.color_button" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮圆角</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_radius" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框粗细</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体大小</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.font_size_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体间距</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.letter_spacing_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体粗细</el-col>
            <el-col :span="10">
              <el-select v-model="param.attr.font_weight_button" size="small" placeholder="请选择">
                <el-option
                  label="正常"
                  value="normal"
                />
                <el-option
                  label="粗"
                  value="bold"
                />
                <el-option
                  label="更粗"
                  value="bolder"
                />
                <el-option
                  label="更细"
                  value="lighter"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="type === 'button_3'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>图片内容</span>
        </div>
        <div class="layout_content">
          <div class="upload_img" @click="gallery">
            <i class="iconfont icon-tubiaolunkuo-" />
            <img :class="['viewImg',param.attr.base64Src? '': 'opacity0']" :src="param.attr.base64Src">
            <div v-show="coverFlag && param.attr.base64Src" class="upload_cover" @mouseover="coverMouse" @mouseout="coverMouse">
              <i class="el-icon-upload"/>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>链接</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>布局</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">宽度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">高度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.height" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20" v-if="seatType === 'top' || seatType === 'bottom'">
            <el-col :span="5" class="lineHeight36">纵轴</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.position" class="widthAuto" :min="0" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { imgSize } from '@/js/common'

export default {
  name: 'ButtonAttr',
  watch: {
    galleryObject(val) {
      this.gallery_active(val)
    }
  },
  props: {
    type: {
      type: String,
      default: 'button'
    },
    seatType: {
      type: String,
      default: ''
    },
    param: {
      type: Object,
      default: Object
    },
    galleryObject: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      coverFlag: false
    }
  },
  mounted() {
  },
  methods: {
    async imgFile(item, url) {
      Vue.set(item, 'base64Src', url)
      Vue.set(item, 'height', await imgSize(url))
    },
    gallery() {
      const _that = this
      _that.$emit('drawer', true)
    },
    gallery_active(url) {
      const _that = this
      _that.imgFile(_that.param.attr, url)
    },
    coverMouse() {
      const _that = this
      _that.coverFlag = !_that.coverFlag
    }
  }
}
</script>

<style lang="scss">
    .form_attr {
        .monograph {
            margin: 20px 0;
            .content {
                padding: 24px 8px;
                border-bottom: 1px solid #e8e8e8;
                .el-collapse-item__content {
                    padding-bottom: 0px !important;
                }
                .marTop15 {
                    margin-top: 15px;
                }
                .layout_content {
                    font-size: 14px;
                    color: #333;
                  .upload_img {
                    width: 100%;
                    height: 175px;
                    border-radius: 4px;
                    border: 1px dashed #d9d9d9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                    .icon-tubiaolunkuo- {
                      color: #d9d9d9;
                      font-size: 50px;
                    }
                    input[type=file] {
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      top: 0;
                      left: 0;
                      opacity: 0;
                      z-index: 1;
                    }
                    .viewImg {
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      top: 0;
                      left: 0;
                    }
                    .upload_cover {
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      top: 0;
                      left: 0;
                      /*z-index: 2;*/
                      background: black;
                      opacity: 0.5;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      i {
                        color: #4950bf !important;
                        font-size: 30px;
                        opacity: 1 !important;
                      }
                    }
                  }
                  .upload_img:hover {
                    border: 1px dashed #4e90ff !important;
                    .icon-tubiaolunkuo- {
                      color: #4e90ff !important;;
                    }
                  }
                }
                .title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    .tile_div {
                        width: 4px;
                        height: 16px;
                        border-radius: 2px;
                        display: inline-block;
                        background-color: #4e90ff;
                    }
                    span {
                        color: #333;
                        font-size: 20px;
                        padding-left: 8px;
                    }
                }
            }
        }
    }
</style>
